<template>
  <el-drawer v-model="addDrawer" size="50%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ formName }}</span></h2>
      <el-button type="primary" @click="confirmAndSave" :disabled="drawerLoading" v-if="!form[idName]">保存&继续填写</el-button>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="!(route.path.includes('dataIntegrate') || route.path.includes('achievementSearch'))">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="160px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省" prop="provinceId" v-if="provinceData.length > 0 || form.provinceId">
            <el-select v-model="form.provinceId" placeholder="请选择省" @change="chooseFormProvince" clearable>
              <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省" v-else>
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市" prop="cityId" v-if="provinceData.length > 0 || form.cityId">
            <el-select v-model="form.cityId" placeholder="请选择市" @change="chooseFormCity" clearable>
              <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市" v-else>
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县" prop="countyId" v-if="provinceData.length > 0 || form.countyId">
            <el-select v-model="form.countyId" placeholder="请选择区/县" @change="chooseFormCounty" clearable>
              <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区/县" v-else>
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="记录编号" prop="id">
            <el-input v-model="form.id" placeholder="请输入记录编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="所属测年工程编号" prop="projectId">
            <el-input v-model="form.projectId" placeholder="请输入所属测年工程编号" clearable maxlength="17"></el-input>
          </el-form-item>
          <el-form-item label="采样点编号" prop="samplePointId">
            <el-input v-model="form.samplePointId" placeholder="请输入采样点编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="样品野外编号" prop="fieldId">
            <el-input v-model="form.fieldId" placeholder="请输入样品野外编号" clearable maxlength="17"></el-input>
          </el-form-item>
          <el-form-item label="采样类型" prop="sampleType">
            <dict-select code="SampleTypeCVD" :value="form.sampleType"
              @update="val => form.sampleType = val"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="测试方法" prop="sampleTestedMethod">
            <dict-select code="SampleTestedMethodCVD" :value="form.sampleTestedMethod"
              @update="val => form.sampleTestedMethod = val"></dict-select>
          </el-form-item>
          <el-form-item label="采样深度" prop="depth">
            <el-input v-model="form.depth" placeholder="请输入采样深度" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="测年结果[年龄±误差(单位)]" prop="dateAge" style="width: 100%">
            <el-input v-model="form.dateAge" placeholder="请输入测年结果[年龄±误差(单位)]" clearable
              :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" show-word-limit maxlength="100"
              resize="none"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="可靠性评估" prop="reliability">
            <dict-select code="ReliabilityTypeCVD" :value="form.reliability"
              @update="val => form.reliability = val"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="测试结果数据表编号" prop="testedDataArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.testedDataArwid" placeholder="请输入测试结果数据表编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.testedDataArwidAttach"
                @uploadFile="uploadSuccess('testedDataArwidAttach', $event)"
                @delFile="deleteFile('testedDataArwidAttach', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="采样点图图像文件编号" prop="sampleLayoutAiid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.sampleLayoutAiid" placeholder="请输入采样点图图像文件编号" clearable maxlength="20"></el-input>
              <ImageUpload v-model="form.sampleLayoutAiidAttach"
                @uploadImage="uploadSuccess('sampleLayoutAiidAttach', $event)"
                @delFile="deleteFile('sampleLayoutAiidAttach', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="采样点图原始文件编号" prop="sampleLayoutArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.sampleLayoutArwid" placeholder="请输入采样点图原始文件编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.sampleLayoutArwidAttach"
                @uploadFile="uploadSuccess('sampleLayoutArwidAttach', $event)"
                @delFile="deleteFile('sampleLayoutArwidAttach', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="采样照片文件编号" prop="photoAiid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.photoAiid" placeholder="请输入采样照片文件编号" clearable maxlength="20"></el-input>
              <ImageUpload v-model="form.photoAiidAttach" @uploadImage="uploadSuccess('photoAiidAttach', $event)"
                @delFile="deleteFile('photoAiidAttach', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="采样照片原始文件编号" prop="photoArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.photoArwid" placeholder="请输入采样照片原始文件编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.photoArwidAttach" @uploadFile="uploadSuccess('photoArwidAttach', $event)"
                @delFile="deleteFile('photoArwidAttach', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="照片集镜向及拍摄者说明文档" prop="photoDescArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.photoDescArwid" placeholder="请输入照片集镜向及拍摄者说明文档" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.photoDescArwidAttach" @uploadFile="uploadSuccess('photoDescArwidAttach', $event)"
                @delFile="deleteFile('photoDescArwidAttach', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注（对测年结果说明）" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注（对测年结果说明）" :autosize="{ minRows: 5, maxRows: 10 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import { eightDouble } from '@/utils/validate'
import useOtherData from '@/hooks/useOtherData'
const { route, form, queryData, formName, idName,
  uploadSuccess, deleteFile,
  chooseFormProvince, chooseFormCity, chooseFormCounty,
  addRef, confirmAndSave, addDrawer, confirmClick, checkIdValid, openDrawer, closeDrawer, drawerLoading } = useOtherData()

const { provinceData, cityData, areaData } = toRefs(queryData)

const formRules = reactive({
  provinceId: [{ required: true, message: '请选择省！', trigger: 'change' }],
  cityId: [{ required: true, message: '请选择市！', trigger: 'change' }],
  countyId: [{ required: true, message: '请选择区/县！', trigger: 'change' }],
  id: [
    { required: true, message: '请输入记录编号!', trigger: 'blur' },
    { min: 17, max: 17, message: '长度必须为17位', trigger: 'blur' },
    { validator: checkIdValid, trigger: 'blur' },
  ],
  projectId: [{ required: true, message: '请输入所属测年工程编号!', trigger: 'blur' }],
  samplePointId: [{ required: true, message: '请输入采样点编号!', trigger: 'blur' }],
  fieldId: [{ required: true, message: '请输入样品野外编号!', trigger: 'blur' }],
  sampleType: [{ required: true, message: '请选择采样类型!', trigger: 'change' }],
  depth: [eightDouble]
})
</script>